<template>
  <div id="app">
    <div id="nav"></div>
    <h1>学习vue3新特性</h1>
    <div>
      <el-row :gutter="10">
        <el-col :span="7">
          <el-input size="mini" placeholder="请输入品牌名称">
            <template slot="prepend">品牌名称 :</template>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button size="mini" type="primary" icon="el-icon-search"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <template>
        <el-table
          :data="branclist"
          align="center"
          style="width: 100%"
          border
          size="mini"
        >
          <el-table-column align="center" prop="id" label="id">
          </el-table-column>
          <el-table-column align="center" label="日期">
            <template v-slot="scope">
              {{ scope.row.ctime | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="姓名">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <!-- <template slot-scope="scope"> -->
            <template v-slot="scope">
              <el-button
                type="danger"
                size="mini"
                @click="deletes(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>
<script>
import { onMounted, value } from "vue-function-api";
import { list } from "./api/bran_list.js";

export default {
  // 在setup 中无法访问this
  setup(props, context) {
    const branclist = value([]);
    const root = context.root;

    const getBranList = async () => {
      const { data } = await list();
      if (data.status !== 0) {
        return root.$message.info("没数据");
      }
      root.$message.success("有数据");
      branclist.value = data.message;
    };

    // 删除
    const deletes = (v, index) => {
      branclist.value.splice(index, 1);
    };
    onMounted(() => {
      getBranList();
    });
    return {
      branclist,
      deletes, // 删除
    };
  },
};
</script>
<style scoped>
#app {
  font-size: 18px;
  text-align: center;
}
</style>
